<template>
	<view class='my-path-list'>
		<view class='path-list'>
			<view v-for="(item,index) in list" :key="index" @tap="toAddPath(index)">
				<view class='path-item' @tap="goConfirmOrder(item)">
					<view class='item-main'>
						<view class='item-name'>{{item.name}}</view>
						<view>{{item.tel}}</view>
					</view>
					<view class='item-main'>
						<view class='active' v-if="item.isDefault == 1">默认</view>
						<view>{{item.province}} {{item.city}} {{item.district}} {{item.address}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class='add-path'>
			<view class='add-path-btn' @tap="goAddPath">新增地址</view>
		</view>
	</view>
</template>
<script setup>
	import $http from '@/common/api/request.js'
	import {
		usepathStore
	} from '@/store/path.js'
	import {
		storeToRefs
	} from 'pinia'
	import {
		ref
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	const pathStore = usepathStore()
	const {
		list
	} = storeToRefs(pathStore)
	const isSelectedPath = ref(false)
	// 新增
	const goAddPath = () => {
		uni.navigateTo({
			url: "../my-add-path/my-add-path"
		})
	}

	onLoad((e) => {
		if (e.type === 'selectPath') {
			isSelectedPath.value = true;
		}
			//请求收货地址接口
		__initAddress();
	})
	//初始化 （请求收货地址接口）
	const __initAddress = () =>{
		$http.request({
			url:"/selectAddress",
			method:"POST",
			header:{
				token:true
			}
		}).then((res)=>{
			pathStore.__initAddressList(res);
			// console.log(res);
		}).catch(()=>{
			uni.showToast({
				title:'请求失败',
				icon:'none'
			})
		})
	}
	// 修改
	const toAddPath = (index) => {
		let pathObj = JSON.stringify({
			index: index,
			item: pathStore.list[index]
		})
		uni.navigateTo({
			url: "../my-add-path/my-add-path?data=" + pathObj + ""
		})
	}
	
	// 返回确定订单页面
	const goConfirmOrder = (item) => {
		if (isSelectedPath.value) {
			//自定义事件：页面通讯
			uni.$emit('selectPathItem',item);
			uni.navigateBack({
				delta: 1
			})
		}

	}
</script>
<style scoped>
	uni-view {
		font-size: 28rpx;
	}

	.path-list {
		padding-left: 20rpx;

	}

	.path-item {
		padding: 30rpx;
		border-bottom: 2rpx solid #CCCCCC;
	}

	.item-main {
		display: flex;
		align-items: center;
		padding: 0 0 10rpx 20rpx;
	}

	.item-name {
		padding-right: 10rpx;
	}

	.active {

		background-color: #49BDFB;
		color: #FFFFFF;
		border-radius: 26rpx;
		font-size: 24rpx;
		text-align: center;
	}

	.add-path {
		padding: 20rpx 0;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.add-path-btn {
		border: 2rpx solid #49BDFB;
		color: #49BDFB;
		border-radius: 30rpx;
		padding: 6rpx 60rpx;
	}
</style>